<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-sm-3 control-label">用户名:</label>
            <input type="text" id="username" name="username" class="col-sm-5">
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-3 control-label">密码:</label>
            <input type="password" id="password" name="password" class="col-sm-5">
        </div>
        <div class="form-group">
            <label for="" class="col-sm-3 control-label">上传文件:</label>
            <input type="file" id="file" name="file" class="col-sm-5">
        </div>
        <button type="submit" id="sub" class="btn btn-success btn-lg">提交</button>
    </div>

    
</div>


<script src="/static/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/jquery.cookie.js"></script>

<script>
    $("#sub").on("click", function () {
        var formdata = new FormData;
        formdata.append("username", $("#username").val());
        formdata.append("password", $("#password").val());
        formdata.append("file", $("#file")[0].files[0]);
        $.ajax({
            url: "{% url 'web2:ajaxUpload' %}",
            method: "post",
            data: formdata,
            headers: {"X-CSRFToken": $.cookie("csrftoken")},
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data)
            }
        })
    })
    
</script>

</body>
</html>